<template>
    
    <!-- 组件的模板 -->
    <div class="weui-cells weui-cells_form mr-top-12">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">标题</label></div>
            <div class="weui-cell__bd">
                <!-- <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/> -->
                <input class="weui-input" type="text" placeholder="请输入标题" v-model="item.info.title"/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">提示语</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入提示语 (选填)" v-model="item.info.tip"/>
            </div>
        </div>
    </div>
    <div class="page attendance-info">
    <imageview
        v-if="show_img_select"
        :title="'示例图片(选填)'" 
        :is-requird="0" 
        :img-array.sync="img_arr" 
        :img-data="{}"
        :allow-album="true"
        :example-img-url="[]" 
        :example-img-thumb-url="[]">        
    </imageview>
    <div class="weui-cells weui-cells_form mr-top-12">
        <div class="weui-cell weui-cell_switch">
            <div class="weui-cell__bd">是否必填</div>
            <div class="weui-cell__ft">
                <input class="weui-switch" type="checkbox" v-model="item.info.required"/>
            </div>
        </div>
        <div class="weui-cell weui-cell_switch">
            <div class="weui-cell__bd">是否允许选择相册图片</div>
            <div class="weui-cell__ft">
                <input class="weui-switch" type="checkbox" v-model="item.info.isSelectImg"/>
            </div>
        </div>
        <a class="weui-cell weui-cell_access" href="javascript:;" @click="selectimgNumber" v-if="item.info.required == 1">
                <div class="weui-cell__bd">
                    <p>至少上传照片数</p>
                </div>                
                <div class="weui-cell__ft" v-if="item.info.check_guide.min == ''">1</div>
                <div class="weui-cell__ft" v-else>{{item.info.check_guide.min}}</div>
        </a> 
    </div>
</div>
    <!-- <div class="bgc"><div class="weui-cells__title">预览</div></div>

    <imageview :title="item.info.title"></imageview>
    <div class="weui-cells__tips">{{item.info.tip}}</div> -->
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import cache from 'gapi/cache.js'
    import widget from 'gapi/widget.js'
    import * as util from 'js/util.js'
    import commonPage from 'clientApi/commonPage.js'
    import clientUi from 'gapi/clientUi.js'
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    import Imageview from 'components/Imageview/Imageview'
    // import { getImageArray } from 'components/Imageview/ImageviewGetters'

    /**
     *  组件实例对象
     */
    export default {
        components: {
            Imageview
        },
        data: function(){
            return{
                item: {
                    "id": '',
                    "type": "Imageview",
                    "name": "照片",
                    "info": {
                        "title": '',
                        "tip": '',
                        "value": '',
                        "example_img": { 
                            "thumb_url":'',
                            "url": []
                        },
                        "required": 1,
                        "isSelectImg": 0,
                        can_choose_picture: 0,
                        "check_guide": {
                            "max": "",
                            "min": "1"
                        }
                    }
                },
                img_arr: [],
                show_img_select: false
            }
        },
        computed: {
            photoDate(){
                let list = []
                this.img_arr.forEach((item)=>{
                    list.push(item.url)
                })
                return list
            }
        },
        vuex: {
            getters: {
                // getImageArray
            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                //判断页面来源 type = kqandsign : 签到、考勤 自定义字段
                let origin_page = util.getUrddataString('type')
                this.show_img_select = origin_page === 'kqandsign' ? true : false
                //判断是否传有 数据 参数  如果是修改字段  把源数据覆盖
                let matindex = util.getUrddataString('matindex')
                let designInfo = null
                if(origin_page === 'kqandsign'){
                    this.item.info.value = { 
                            "thumb_url": '',
                            "url": ''
                        }
                    // widget.toast('kqandsign')
                    if(matindex !== null){
                        cache.getCache('designInfo', (data) => {
                            console.log(data)
                            this.item = data
                            this.item.info.value = { 
                                    "thumb_url": [],
                                    "url": []
                                }
                            this.item.info.required = this.item.info.required == 1 ? 1 : 0
                            if((this.item.info.required == 1 && this.item.info.check_guide == null) || (this.item.info.check_guide.min == '' && this.item.info.required == 1)){
                                this.item.info.check_guide = {}
                               this.item.info.check_guide.min = '1'
                            }
                            this.item.info.isSelectImg = this.item.info.can_choose_picture == 1 ? 1 : 0
                            this.item.info.example_img.url.forEach((obj) => {
                                this.img_arr.push({url: obj})
                            })
                        })
                    }
                    
                }else{
                    // widget.toast('form')
                    designInfo = util.getUrddataString('designInfo')

                    if(designInfo !== null){
                        let tempItem = JSON.parse(designInfo)
                        this.item = tempItem
                        this.item.info.required = this.item.info.required == 1 ? 1 : 0  
                        if(this.item.info.required == 1 && this.item.info.check_guide == null){
                           this.item.info.check_guide = {}
                           this.item.info.check_guide.min = '1'
                        }else if(this.item.info.check_guide.min == '' && this.item.info.required == 1){
                            this.item.info.check_guide.min = '1'
                        }
                        this.item.info.isSelectImg = this.item.info.isSelectImg == 1 ? 1 : 0
                    }
                }

                commonPage.updateTitleBar({
                    // backAction: 'checkChange',    // 点击返回按钮的动作（即回调函数名称）
                    // leftDisplay: false,            // 是否显示左按钮
                    // leftText: '',                // 左按钮文案
                    //leftAction: 'checkChange',    // 点击左按钮的动作（即回调函数名称）
                    rightDisplay: true,            // 是否显示右按钮
                    rightText: '提交',            // 右按钮文案
                    rightAction: 'saveResume'    // 点击右按钮的文案（即回调函数名称）
                })
                //点击右上角 确定 按钮
                window.saveResume = () => {
                    this.item.info.required = this.item.info.required == 1 ? 1 : 0
                    if((this.item.info.required == 1 && this.item.info.check_guide == null) || (this.item.info.check_guide.min == '' && this.item.info.required == 1)){
                        this.item.info.check_guide.min = '1'
                    }
                    this.item.info.isSelectImg = this.item.info.isSelectImg == 1 ? 1 : 0
                    this.item.info.can_choose_picture = this.item.info.isSelectImg == 1 ? 1 : 0
                    if(origin_page === 'kqandsign'){                        
                        if(this.img_arr.length >= 0){
                            this.item.info.example_img.url = this.photoDate
                        }
                    }
                    
                    if(!this.item.info.title){
                        widget.toast('请输入标题')
                    }else{
                        if(origin_page === 'kqandsign'){//kqandsign
                            if(matindex !== null){//修改
                                commonPage.goBack(1, {designInfo: this.item, matindex: matindex})
                            }else{//新建
                                commonPage.goBack(1, {designInfo: this.item, matindex: -1})
                            }
                        }else{//form
                            //如果是修改
                            if(designInfo !== null){
                                //先获取缓存
                                cache.getCache('formInfo', (data) => {
                                    //修改对应字段缓存信息 重新缓存
                                    data.format_info.splice(matindex, 1, this.item)
                                    cache.setCache('formInfo', data, 10000)
                                    // alert(JSON.stringify(this.item))
                                    commonPage.goBack(1)
                                })
                            }else{
                                //新建字段
                                cache.getCache('formInfo', (data) => {
                                    //判断有没有缓存  没有的话把默认数据格式缓存上
                                    let tempObj = {
                                        title: '',
                                        desc: '',
                                        format_info: []
                                    }
                                    if(data !== null){
                                        // alert(1)
                                        tempObj = data
                                    }
                                    //添加新字段到缓存中
                                    tempObj.format_info.push(this.item)
                                    cache.setCache('formInfo', tempObj, 10000)
                                    commonPage.goBack(1)
                                })
                            }
                        }
                    }
                }
                
            },
            selectimgNumber(){
                let that = this;
                let title = '请选择';
                let data = { 
                    data1: ['1', '2', '3', '4', '5'] 
                }
                let index = data.data1.indexOf(this.item.info.check_guide.min)
                let select = [index];
                clientUi.showPicker(data, select, title, (data) => {
                    if(data.data1){
                        this.item.info.check_guide.min = (parseInt(data.data1)+1).toString()
                    }else{
                        this.item.info.check_guide.min = '1'
                    }
                })
             }

        },
        created(){

            this.init();
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style type="text/css">
    /*div.bgc{
        padding: 0.1px;
        background-color: #f2f2f2;
    }
    div.bgc div{
        margin-bottom: .77em;
    }*/
    
    html body{
        background-color: #f2f2f2;
    }
    div.mr-top-12{
        margin-top: 12px;
    }
    div.weui-cell__hd{
        color:rgb(153, 153, 153);
    }
    div.weui-cell__bd{
        color:rgb(51, 51, 51);
    }
    div.weui-cell{
        padding: 14px 12px;
    }
    div.weui-cell_switch{
        padding-top: 8px;
        padding-bottom: 8px;
    }
</style>



